<template>
  <div class="wrap">

    <sky-panel title="超大数据显示">

      <template #handle>

        <el-button type="primary" @click="getAllNodes">获取所有节点</el-button>
      </template>
      <template #main>

        <div v-if="treeLargeData.length>0">
          <sky-tree-table
            ref="skyLargeTable"
            v-slot="row"
            large-data
            fixed-head
            fixed-column
            :max-height="350"
            :table-width="1500"
            :data="treeLargeData"
            node-key="id"
            :props="defaultProps"
            @getCurrent="getCurrent"
          >
            <sky-tree-column :row="row.scope" prop="fullCode" label="编码" width="350" ladder fixed fixed-left-width="0">{{ row?.scope?.data.fullCode }}</sky-tree-column>
            <sky-tree-column :row="row.scope" prop="name" label="名字">
              <el-input v-model="row.scope.data.name" placeholder="请输入内容" />
            </sky-tree-column>
            <sky-tree-column :row="row.scope" prop="id" label="id">{{ row?.scope?.data.id }}</sky-tree-column>
            <sky-tree-column :row="row.scope" prop="position" label="position">{{ row?.scope?.data.position }}</sky-tree-column>
            <sky-tree-column :row="row.scope" prop="fullPosition" label="fullPosition">{{ row?.scope?.data.fullPosition }}</sky-tree-column>

          </sky-tree-table>
        </div>

      </template>
    </sky-panel>

  </div>
</template>

<script lang="ts">
import { getTreeData } from '_@/api/example/index'
import { defineComponent, ref, onMounted, getCurrentInstance, reactive } from 'vue'
export default defineComponent({
  setup() {
    const skyLargeTable = ref()
    const current = ref(null)

    /**
 *
 *
 * 生成树结构
 *
 *
 */
    const differentiateTree = function(arr: any, rule = { parentId: 'nodeParentId', id: 'nodeId', startParentId: null }) {
      const arrcloned = [...arr]
      const handle = (id: number) => {
        const arr: any[] = []
        arrcloned.forEach(folder => {
          if (folder[rule.parentId] === id) {
            const children = handle(folder[rule.id])

            if (folder.children) {
              folder.children = [].concat(folder.children, children as any)
            } else {
              // eslint-disable-next-line no-empty
              if (children.length === 0) {
              } else {
                folder.children = children
              }
            }
            // folder.title = folder.name
            arr.push(folder)
          }
        })
        return arr
      }
      return handle(rule.startParentId as any)
    }

    const treeLargeData = ref([])

    const getTreeFunc = async() => {
      const { data: { list }} = await getTreeData({})
      console.log('list', list)
      treeLargeData.value = differentiateTree(list.result, { parentId: 'parentId', id: 'id', startParentId: null }) as any
      console.log('treeData', treeLargeData.value)
    }

    getTreeFunc()

    const getAllNodes = () => {
      console.log(skyLargeTable.value.getAllNodes())
    }

    const getCurrent = (type: any, node: null) => {
      console.log('node', node)
      current.value = node
    }

    return {
      skyLargeTable,
      getAllNodes,
      getCurrent,
      treeLargeData
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  }
})
</script>

<style scoped lang="less">
.wrap {
  margin: 0 auto 20px;
  padding-bottom: 50px;
}
</style>
